/*. replay */

.timeline {
  -moz-appearance: none;
  background: var(--chrome);
  box-sizing: border-box;
  --progressbar-transition: 200ms;
  display: flex;
  padding: 10px 12px 12px 6px;
  align-items: center;
  user-select: none;
}

.theme-light .timeline,
.theme-light .breakpoint-navigation-timeline {
  --commandbar-button-hover-background: #efefef;
  --progress-recording-background: hsl(0, 100%, 97%);
  --progress-playing-background: #d4ebff;
  --recording-marker-background: hsl(14.9, 100%, 67%);
  --replaying-marker-highlighted-background: var(--blue-60);
  --recording-marker-background-hover: hsl(14.9, 100%, 47%);
  --replaying-marker-fill-hover: var(--blue-60);
  --hover-scrubber-line-background: var(--blue-50);
  --progress-recording-line: #d0021b;
  --progressbar-background: #eeeeee;
  --progressbar-line-color: var(--primary-accent);
  --proggressbar-border-color: var(--theme-splitter-color);
  --tick-future-background: #bfc9d2;
  --tick-background: var(--blue-50);
  --tick-recording-background: #d0021b;
}

.pause_play_circle {
  font-size: 29px;
}

.timeline > *:not(:last-child) {
  margin-right: 8px;
}

.timeline .commands :focus:not(:focus-visible) {
  outline: none;
  background: inherit;
}

.timeline .progress-bar-container {
  display: flex;
  position: relative;
  flex-grow: 1;
}

.timeline .progress-bar {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-grow: 1;
  height: 32px;
  position: relative;
  width: 100%;
}

.timeline .progress {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-right-color: var(--replay-head-background);
  border-right-width: 1px;
  border-right-style: solid;
}

.timeline .markers-container,
.timeline .preview-markers-container {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.timeline .commands {
  display: flex;
  flex-direction: row;
}

.timeline .commands > button {
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline .commands > button:hover,
.timeline .commands > button:hover:focus {
  background: var(--theme-toolbar-background-hover);
}

.timeline .commands > button[disabled] {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}

.timeline .commands > button .img {
  width: 28px;
  height: 28px;
}

.timeline .commands > button:hover .img {
  background: var(--primary-accent-hover);
}

.timeline .command-button.active:hover {
  background: var(--commandbar-button-hover-background);
  cursor: pointer;
}

.timeline .command-button.active {
  opacity: 1;
}

.timeline div.command-button .rewind {
  transform: scaleX(-1);
}

.timeline .progress-line,
.breakpoint-navigation-timeline .progress-line {
  width: 0%;
  height: 3px;
  border-radius: 4px;
  /* border-top: 3px dashed var(--primary-accent); */
  border-top: 3px solid var(--primary-accent);
  position: absolute;
  pointer-events: none;
  margin-top: auto;
  margin-bottom: auto;
  top: 0;
  bottom: 0;
}

.timeline .overlay-container:hover .progress-line {
  height: 5px;
}

.timeline .progress-line.full,
.breakpoint-navigation-timeline .progress-line.full {
  width: 100%;
  border-top-color: var(--progressbar-background);
}

.timeline .progress-line.preview-min,
.breakpoint-navigation-timeline .progress-line.preview-min {
  border-top-color: #c0c0c0;
}

.timeline .progress-line.preview-max {
  border-top-color: #dadada;
}

.timeline .unloaded-regions {
  width: 0%;
  height: 3px;
  border-radius: 4px;
  height: 3px;
  background-image: url("/images/dotted-mask.svg");
  position: absolute;
  pointer-events: none;
  margin-top: auto;
  margin-bottom: auto;
  top: 0;
  bottom: 0;
}

.timeline .unloaded-regions.end {
  right: 0;
}

.timeline .zoomboundary {
  padding-top: 7px;
  padding-right: 4px;
}

.timeline .progress-line-paused {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: var(--secondary-accent);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Timeline timestamp */

.timeline .timeline-time {
  font-size: 12px;
}

.timeline .timeline-time > :not(:first-child) {
  margin-left: 4px;
}

.timeline .timeline-time .time-total {
  color: var(--theme-comment);
}
